package com.leil.project

// --- 常用 import，确保能编译 ---
import androidx.compose.foundation.background        // 用于设置背景色
import androidx.compose.foundation.border           // 用于绘制边框
import androidx.compose.foundation.interaction.MutableInteractionSource
import androidx.compose.foundation.layout.*         // height、padding、fillMaxWidth 等
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.foundation.text.BasicTextField
import androidx.compose.material3.*                 // MaterialTheme、TextFieldDefaults 等
import androidx.compose.runtime.*                   // remember、@Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.SolidColor      // 光标颜色需要 Brush，这里用纯色 SolidColor
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.text.input.VisualTransformation
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import org.jetbrains.compose.ui.tooling.preview.Preview

@OptIn(ExperimentalMaterial3Api::class)            // DecorationBox 在 M3 里是实验 API，需显式 opt-in
@Composable
fun CompactTextField(
    value: String,                                  // 当前文本值（受控组件）
    onValueChange: (String) -> Unit,                // 文本变更回调
    modifier: Modifier = Modifier,                  // 允许外部继续叠加修饰符
    placeholder: String = "请输入内容",               // 占位提示
    enabled: Boolean = true,                        // 是否可用
) {
    val interaction = remember { MutableInteractionSource() } // 交互状态（聚焦、按压等），供 Ripple/颜色计算使用
    val colors = TextFieldDefaults.colors(                    // 统一使用 M3 的颜色体系，保证主题一致
        focusedTextColor = MaterialTheme.colorScheme.onSurface,
        unfocusedTextColor = MaterialTheme.colorScheme.onSurface,
        cursorColor = MaterialTheme.colorScheme.primary,
        focusedIndicatorColor = MaterialTheme.colorScheme.primary,   // 如果你改用下划线/描边，这些颜色会用到
        unfocusedIndicatorColor = MaterialTheme.colorScheme.outline
    )

    BasicTextField(
        value = value,                                        // 绑定文本
        onValueChange = onValueChange,                        // 文本变化 -> 往外抛
        singleLine = true,                                    // 单行，避免高度被多行撑开
        enabled = enabled,                                    // 可用/禁用
        textStyle = LocalTextStyle.current.copy(              // 文本样式以当前环境为基准再改小字号
            fontSize = 14.sp
        ),
        cursorBrush = SolidColor(MaterialTheme.colorScheme.primary), // 设置光标画笔（颜色）
        modifier = modifier
            .height(30.dp)                                    // 关键：设定目标高度（更矮）
            .fillMaxWidth()                                   // 占满可用宽度
            .background(                                      // 自定义容器背景（不用 Outlined/Filled 预设）
                color = MaterialTheme.colorScheme.surface,
                shape = RoundedCornerShape(8.dp)              // 圆角容器
            ),
//            .border(                                          // 自绘边框（模拟 OutlinedTextField 的描边）
//                width = 1.dp,
//                color = MaterialTheme.colorScheme.outline,
//                shape = RoundedCornerShape(8.dp)
//            ),
//            .padding(horizontal = 8.dp, vertical = 8.dp),     // 关键：缩小内边距就是“变矮”的核心
        decorationBox = { innerTextField ->                   // 装饰槽：决定占位符/图标/标签等的布局与绘制
            TextFieldDefaults.DecorationBox(
                value = value,                                // 传入当前值以控制占位符等的可见性/动画
                innerTextField = innerTextField,              // 真正的可编辑区域，由 BasicTextField 提供
                enabled = enabled,                            // 传递可用态，影响颜色/样式
                singleLine = true,                            // 布局按单行处理
                visualTransformation = VisualTransformation.None, // 无视觉变换（如密码隐藏可替换这里）
                interactionSource = interaction,              // 用于计算聚焦/按压等交互态
                placeholder = {                               // 占位内容：当 value 为空时显示
                    Text(placeholder, fontSize = 14.sp)
                },
                colors = colors,                              // 使用上面配置的 M3 颜色
                contentPadding = PaddingValues(0.dp)          // 关键：把 DecorationBox 自带 padding 清零
                // 说明：我们已在外层用 Modifier.padding 缩小了内边距，
                // 这里再清零 DecorationBox 的默认 padding，避免“叠加变高”
            )
        }
    )
}

@Preview
@Composable
fun CompactTextFieldPreview() {
    var text by remember { mutableStateOf("") }
    MaterialTheme {
        Column(Modifier.padding(16.dp).background(MaterialTheme.colorScheme.surfaceContainer)) {
            CompactTextField(
                value = text,
                onValueChange = { text = it },
                placeholder = "搜索...",
            )
            Spacer(Modifier.height(12.dp))
            Text("当前输入：$text")
        }
    }
}
